<template>
  <div class="box">
    <h1>商品管理 -- 添加商品</h1>

    <div class="detail_cotent">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品名称">
          <el-input placeholder="请输入商品名称" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input
            placeholder="请输入商品描述"
            v-model="form.subtitle"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属分类">
          <el-select
            v-model="form.region"
            @change="regionChange"
            placeholder="请选择一级品类"
          >
            <el-option
              v-for="(item, index) in region1list"
              :key="index"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
          <el-select
            v-if="form.region"
            v-model="form.region2"
            placeholder="请选择二级品类"
          >
            <el-option
              v-for="(item, index) in region2list"
              :key="index"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input class="inp" placeholder="价格" v-model="form.price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品库存">
          <!-- stock -->
          <el-input class="inp" placeholder="库存" v-model="form.stock">
            <template slot="append">件</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
            name="upload_file"
            class="upload-demo"
            action="/api/product/upload.do"
            :on-preview="handlePreview"
            :before-remove="beforeRemove"
            :on-success="handleSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品详情">
       
        </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { add, addimg, Category1 } from "../../../http/http";
export default {
  data() {
    return {
      form: {
        categoryId: 0,
        name: "",
        subtitle: "",
        stock: "",
        region2: "",
        region: "",
        subImages: "",
        detail: "",
        price: "",
        status: 1,
      },
      region1list: [],
      region2list: [],
      editorOption: {},
      fileList: [],
      imageUrl: "",
    };
  },
  mounted() {
    Category1().then((res) => {
      this.region1list = res.data.data;
    });
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log("cg", response.data.uri);
      this.form.subImages = response.data.uri;
    },
    onEditorChange(v) {
      // console.log(v);
      this.form.detail = v.html;
    },
    regionChange(v) {
      this.region1list.map((item, i) => {
        if (item.name === v) {
          category1({ categoryId: item.id }).then((res2) => {
            this.region2list = res2.data.data;
          });
        }
      });
    },
    onSubmit() {
      console.log(this.form);
      add(this.form).then((res) => {
        this.$message({
          message: res.data.data,
          type: "success",
        });
        this.$router.push({ path: "/permissions" });
      });
      // this.$router.push("/permissions");
    },
    handlePreview(file) {
      console.log(file.name);

      this.form.subImages = file.name;
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style scoped>
.box {
  width: 80%;
  margin-left: 20%;
}
.card {
  width: 80%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.shops {
  width: 500px;
  height: 20px;
  background-color: white;
  color: #333333;
}
.cards {
  width: 100%;
  height: 100px;
  border: 1px solid grey;
}
</style>